import React, { useEffect, useState } from 'react'

import { useProList, useTitle, useQueryId } from './22-Hooks'

/*
  自定义 hooks 中可以有参数，也可以无参数
  可以有返回值，也可以无返回值
  自定义 hooks 中可以嵌套 hooks 的
  hooks 只能在函数式组件的最外层使用
  所谓的自定义 hooks 可以理解为将一些重复使用的代码封装在一个函数中
*/ 

function useBanner(){
  const [bannerList,setBannerList] = useState([])

  useEffect(()=>{
    fetch('http://121.89.205.189:3000/api/banner/list')
    .then(res => res.json())
    .then(res => {
      setBannerList(res.data)
    })
  }, [])

  return bannerList
}

const App = () => {

    const bannerList = useBanner()

    const bannerHtml = bannerList.map(item => {
      return <img key={item.bannerid} src={item.img} style={{width: 100}} />
    })

    const proListHtml = useProList(3)


    useTitle('大标题')


    // jQuery 操作 DOM 元素
    const dom = useQueryId('title')
    console.log(111111111,dom);
    return (
      <div >
        {bannerHtml} 
        {proListHtml}
        <div id='title'>标了个题</div>
      </div>
  )
}

export default App